<!-- 监室人员并可拖动 -->
<template>
  <div ref="personWrapRef" class="person-draggable" :style="{ height: height }">
    <el-scrollbar height="100%">
      <div class="person-wrap" :style="{ 'grid-template-columns': 'repeat(' + columns + ', 1fr)' }">
        <div class="person flex-center" :draggable="draggable && showSelect ? p.selected : draggable ? true : false" v-for="(p, index) in persons" :key="p.rybh" :data-person="JSON.stringify(p)" @click="select(p, index)">
          {{ p.xm }}
          <label v-if="p.selected && showSelect" class="selected-label"
            ><el-icon color="#fff"><Select /></el-icon
          ></label>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup name="PersonsDraggable">
import { ref, onBeforeMount, onMounted, computed, watch, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/index'
import { stores } from '@/stores/index.js'
const userStore = stores.useUserStore()
const persons = defineModel('persons', {
  default: []
})
const props = defineProps({
  height: {
    type: String,
    default: '300rem'
  },
  draggable: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: true
  },
  //是否显示选中标识
  showSelect: {
    type: Boolean,
    default: true
  },
  columns: {
    type: [Number, String],
    default: 15
  }
})
const personWrapRef = ref()
watch(
  persons,
  (newVal) => {
    if (newVal.length > 0) {
      initDrag()
    }
  },
  {
    // immediate: true
  }
)
const select = (p, index) => {
  if (!props.multiple) {
    persons.value.forEach((item) => (item.selected = false))
  }
  persons.value[index].selected = !persons.value[index].selected
}
onMounted(() => {
  initDrag()
})
onUnmounted(() => {
  if (personWrapRef.value) {
    let sources = personWrapRef.value.getElementsByClassName('person')
    sources = Array.from(sources)
    if (sources.length > 0) {
      sources.forEach((ele) => {
        ele.removeEventListener('dragstart', handleDragstart)
        ele.removeEventListener('dragend', handleDragend)
      })
    }
  }
})
function initDrag() {
  // if (!personWrapRef.value) return
  let sources = personWrapRef.value.getElementsByClassName('person')
  sources = Array.from(sources)
  if (sources.length > 0) {
    sources.forEach((ele) => {
      ele.removeEventListener('dragstart', handleDragstart)
      ele.removeEventListener('dragend', handleDragend)
    })
    nextTick(() => {
      let sources = personWrapRef.value.getElementsByClassName('person')
      sources = Array.from(sources)

      sources.forEach((ele) => {
        ele.addEventListener('dragstart', handleDragstart)
        ele.addEventListener('dragend', handleDragend)
      })
    })
  }
}
function handleDragstart(event) {
  // 设置为半透明
  event.target.classList.add('dragging')
  console.log('infor--', JSON.parse(event.target.dataset.person))
  //showSelect = true 开启了选中标识，表示要选中才能拖动，showSelect = false 表示不用选中可以直接拖动
  let data = null
  if (props.showSelect) {
    if (props.multiple) {
      data = persons.value.filter((p) => p.selected)
    } else {
      data = persons.value.filter((p) => p.selected)[0]
    }
  } else {
    data = event.target.dataset.person
  }

  event.dataTransfer.setData('data', data)
}
function handleDragend(event) {
  event.target.classList.remove('dragging')
}
</script>
<style lang="scss" scoped>
.person-draggable {
  padding: 10px 5px 10px 10px;
  border: var(--el-border);

  .person-wrap {
    margin-right: 10px;
    border-radius: 4px;
    display: grid;
    grid-auto-rows: 40px;
    gap: 15px;
  }
  .person {
    position: relative;
    border: 1px solid var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    font-size: 16px;

    &.dragging {
      // border: 1px solid red;
      opacity: 0.5;
    }

    // height: 50px;
    .selected-label {
      position: absolute;
      right: -15px;
      top: -6px;
      width: 40px;
      height: 24px;
      background: var(--el-color-primary);
      text-align: center;
      transform: rotate(45deg);
      .el-icon {
        font-size: 12px;
        margin-top: 11px;
        transform: rotate(-45deg);
      }
    }
  }
}
</style>
